<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表盘</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/admin.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-cogs"></i> 管理员控制台</h1>
            <button id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出登录</button>
        </header>

        <div class="admin-panel">
            <div class="sidebar">
                <h2><i class="fas fa-bars"></i> 菜单</h2>
                <ul>
                    <li><button class="menu-btn active" data-target="customer-management"><i class="fas fa-users"></i> 客户管理</button></li>
                    <li><button class="menu-btn" data-target="card-management"><i class="fas fa-credit-card"></i> 银行卡管理</button></li>
                    <li><button class="menu-btn" data-target="deposit-type-management"><i class="fas fa-piggy-bank"></i> 存款业务管理</button></li>
                    <li><button class="menu-btn" data-target="transaction-management"><i class="fas fa-exchange-alt"></i> 交易管理</button></li>
                </ul>
            </div>

            <div class="content">
                <!-- 客户管理 -->
                <div id="customer-management" class="content-section active">
                    <h2><i class="fas fa-users"></i> 客户管理</h2>
                    <div class="action-buttons">
                        <button id="addCustomerBtn"><i class="fas fa-plus"></i> 添加客户</button>
                        <button id="exportCustomersBtn"><i class="fas fa-file-export"></i> 导出客户数据</button>
                    </div>
                    <table id="customersTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-id-card"></i> 客户ID</th>
                                <th><i class="fas fa-user"></i> 客户姓名</th>
                                <th><i class="fas fa-id-badge"></i> 身份证号</th>
                                <th><i class="fas fa-phone"></i> 联系电话</th>
                                <th><i class="fas fa-map-marker-alt"></i> 联系地址</th>
                                <th><i class="fas fa-cog"></i> 操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- 银行卡管理 -->
                <div id="card-management" class="content-section">
                    <h2><i class="fas fa-credit-card"></i> 银行卡管理</h2>
                    <div class="action-buttons">
                        <button id="addCardBtn"><i class="fas fa-plus"></i> 添加银行卡</button>
                        <button id="exportCardsBtn"><i class="fas fa-file-export"></i> 导出银行卡数据</button>
                    </div>
                    <table id="cardsTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-credit-card"></i> 卡号</th>
                                <th><i class="fas fa-piggy-bank"></i> 存款类型</th>
                                <th><i class="fas fa-calendar-alt"></i> 开户日期</th>
                                <th><i class="fas fa-money-bill-wave"></i> 余额</th>
                                <th><i class="fas fa-exclamation-triangle"></i> 是否挂失</th>
                                <th><i class="fas fa-user"></i> 客户ID</th>
                                <th><i class="fas fa-user"></i> 客户姓名</th>
                                <th><i class="fas fa-cog"></i> 操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- 存款业务管理 -->
                <div id="deposit-type-management" class="content-section">
                    <h2><i class="fas fa-piggy-bank"></i> 存款业务管理</h2>
                    <div class="action-buttons">
                        <button id="addDepositTypeBtn"><i class="fas fa-plus"></i> 添加存款业务</button>
                        <button id="exportDepositTypesBtn"><i class="fas fa-file-export"></i> 导出存款业务数据</button>
                    </div>
                    <table id="depositTypesTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-id-card"></i> 类型ID</th>
                                <th><i class="fas fa-tag"></i> 类型名称</th>
                                <th><i class="fas fa-info-circle"></i> 描述</th>
                                <th><i class="fas fa-cog"></i> 操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- 交易管理 -->
                <div id="transaction-management" class="content-section">
                    <h2><i class="fas fa-exchange-alt"></i> 交易管理</h2>
                    <div class="action-buttons">
                        <button id="exportTransactionsBtn"><i class="fas fa-file-export"></i> 导出交易数据</button>
                    </div>
                    <table id="transactionsTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-id-card"></i> 交易ID</th>
                                <th><i class="fas fa-calendar-alt"></i> 交易时间</th>
                                <th><i class="fas fa-exchange-alt"></i> 交易类型</th>
                                <th><i class="fas fa-credit-card"></i> 卡号</th>
                                <th><i class="fas fa-money-bill-wave"></i> 交易金额</th>
                                <th><i class="fas fa-comment"></i> 备注</th>
                                <th><i class="fas fa-piggy-bank"></i> 存款类型</th>
                                <th><i class="fas fa-user"></i> 客户姓名</th>
                                <th><i class="fas fa-cog"></i> 操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 客户编辑模态框 -->
    <div id="customerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="customerModalTitle"><i class="fas fa-user"></i> 添加客户</h2>
            <form id="customerForm">
                <input type="hidden" id="customerId">
                <div class="form-group">
                    <label for="customerName"><i class="fas fa-user"></i> 客户姓名</label>
                    <input type="text" id="customerName" required>
                </div>
                <div class="form-group">
                    <label for="customerIdCard"><i class="fas fa-id-badge"></i> 身份证号</label>
                    <input type="text" id="customerIdCard" required pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$" title="请输入有效的18位身份证号">
                </div>
                <div class="form-group">
                    <label for="customerPhone"><i class="fas fa-phone"></i> 联系电话</label>
                    <input type="text" id="customerPhone" required pattern="^1[3-9]\d{9}$" title="请输入有效的11位手机号">
                </div>
                <div class="form-group">
                    <label for="customerAddress"><i class="fas fa-map-marker-alt"></i> 联系地址</label>
                    <input type="text" id="customerAddress" required>
                </div>
                <button type="submit"><i class="fas fa-save"></i> 保存</button>
            </form>
        </div>
    </div>

    <!-- 银行卡编辑模态框 -->
    <div id="cardModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="cardModalTitle"><i class="fas fa-credit-card"></i> 添加银行卡</h2>
            <form id="cardForm">
                <input type="hidden" id="cardId">
                <div class="form-group">
                    <label for="cardNumber"><i class="fas fa-credit-card"></i> 卡号</label>
                    <input type="text" id="cardNumber" required pattern="\d{16}" title="请输入16位卡号">
                </div>
                <div class="form-group">
                    <label for="cardType"><i class="fas fa-piggy-bank"></i> 存款类型</label>
                    <select id="cardType" required>
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="cardBalance"><i class="fas fa-money-bill-wave"></i> 余额</label>
                    <input type="number" id="cardBalance" min="0" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="cardPassword"><i class="fas fa-lock"></i> 密码</label>
                    <input type="text" id="cardPassword" required pattern="\d{6}" placeholder="6位数字密码">
                </div>
                <div class="form-group">
                    <label for="cardCustomer"><i class="fas fa-user"></i> 客户</label>
                    <select id="cardCustomer" required>
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="cardIsLost"><i class="fas fa-exclamation-triangle"></i> 是否挂失</label>
                    <select id="cardIsLost">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
                <button type="submit"><i class="fas fa-save"></i> 保存</button>
            </form>
        </div>
    </div>

    <!-- 存款业务编辑模态框 -->
    <div id="depositTypeModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="depositTypeModalTitle"><i class="fas fa-piggy-bank"></i> 添加存款业务</h2>
            <form id="depositTypeForm">
                <input type="hidden" id="depositTypeId">
                <div class="form-group">
                    <label for="depositTypeName"><i class="fas fa-tag"></i> 类型名称</label>
                    <input type="text" id="depositTypeName" required>
                </div>
                <div class="form-group">
                    <label for="depositTypeDesc"><i class="fas fa-info-circle"></i> 描述</label>
                    <textarea id="depositTypeDesc" required></textarea>
                </div>
                <button type="submit"><i class="fas fa-save"></i> 保存</button>
            </form>
        </div>
    </div>

    <script src="/static/js/admin.js"></script>
    <script src="/static/js/script.js"></script>
</body>
</html>